<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="1100px">
    <ContentWrap>
      <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
        <el-form-item label="物资名称" prop="materialName">
          <el-input
            v-model="queryParams.materialName"
            placeholder="请输入物资名称"
            :clearable="true"
            @keyup.enter="getPage"
          />
        </el-form-item>
        <el-form-item label="仓库" prop="warehouseId">
          <el-select
            v-model="queryParams.warehouseId"
            placeholder="请输入仓库"
            :clearable="true"
            :disabled="isWarehouseDisabled"
          >
            <el-option
              v-for="dict in materialWarehouse"
              :key="dict.id"
              :label="dict.warehouseName"
              :value="dict.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="批次" prop="batchNo">
          <el-input
            v-model="queryParams.batchNo"
            placeholder="请输入批次"
            :clearable="true"
            @keyup.enter="getPage"
          />
        </el-form-item>
        <el-form-item>
          <el-button v-hasPermi="['material:stock:query']" @click="handleClickSearch">
            <Icon icon="ep:search" />
            搜索
          </el-button>
          <el-button @click="handleClickReset">
            <Icon icon="ep:refresh" />
            重置
          </el-button>
          <el-button @click="saveValues"> 保存 </el-button>
        </el-form-item>
      </el-form>
      <Table
        :columns="columns"
        :page-param="queryParams"
        :adaptive="true"
        :page-data="queryData"
        save-key="MaterialStock"
        @page-change="getPage"
        @row-dblclick="handleTableDblclick"
      >
        <template #warehouseId="{ row }">
          {{ materialWarehouse.find((obj) => obj.id === row.warehouseId).warehouseName }}
        </template>
      </Table>
    </ContentWrap>
    <ContentWrap class="h-[230px]">
      <Table :columns="columns" :data="selectInfoList" @row-dblclick="handleSelectTableDblclick">
        <template #disable="{ row }">
          {{ row.type == 0 ? '否' : '是' }}
        </template>
      </Table>
    </ContentWrap>
  </Dialog>
</template>
<script setup name="MaterialStockSelect" lang="ts">
import * as materialStockApi from '@/api/material/stock'
import * as materialStockDetailModel from '@/model/material/stock/MaterialStockDetail'
const selectInfoList = ref<materialStockDetailModel.MaterialStockDetail[]>([]) // 选中的字段列表
import * as MaterialWarehouseApi from '@/api/material/warehouse'
import { formatDate } from '@/utils/formatTime'
const dialogTitle = ref('')
const dialogVisible = ref(false)
const queryFormRef = ref()
const queryParams = ref({
  materialName: undefined,
  warehouseId: undefined,
  batchNo: undefined
})
const materialWarehouse = ref()
const queryData = ref()
const isWarehouseDisabled = ref(false)
const emit = defineEmits(['selectValue'])
const columns = [
  {
    label: '物资名称',
    prop: 'material.materialName'
  },
  {
    label: '仓库',
    prop: 'warehouseId',
    slot: 'warehouseId'
  },
  {
    label: '物资类别名称',
    prop: 'material.category.categoryName'
  },
  {
    label: '物资规格',
    prop: 'material.materialSpecification'
  },
  {
    label: '基本单位',
    prop: 'material.unit'
  },
  {
    label: '条码',
    prop: 'material.barcode'
  },
  {
    label: '销售单价',
    prop: 'material.price'
  },
  {
    label: '库存数',
    prop: 'stockNumber'
  },
  {
    label: '批次',
    prop: 'batchNo'
  },
  {
    label: '生产日期',
    prop: 'productionDate',
    formatter: ({ productionDate }) => formatDate(productionDate, 'YYYY-MM-DD')
  },
  {
    label: '有效期',
    prop: 'expireDate',
    formatter: ({ expireDate }) => formatDate(expireDate, 'YYYY-MM-DD')
  },
  {
    label: '创建时间',
    prop: 'createTime'
  }
]

/** 打开弹窗 */
const open = async (params) => {
  dialogVisible.value = true
  if (params['warehouseId'] != undefined) {
    queryParams.value.warehouseId = params['warehouseId']['value']
    isWarehouseDisabled.value = params['warehouseId']['isDisabled']
  }
  materialWarehouse.value = await MaterialWarehouseApi.simpleList()
  selectInfoList.value = []
  handleClickSearch()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  queryData.value = await materialStockApi.pageQuery(queryParams.value)
}

/** 双击table列操作  */
const handleTableDblclick = (row) => {
  selectInfoList.value.push(row)
}

const saveValues = () => {
  emit('selectValue', selectInfoList.value)
  close()
}

/** 关闭弹窗 */
const close = async () => {
  dialogVisible.value = false
}

const handleSelectTableDblclick = (row) => {
  const index = selectInfoList.value.indexOf(row)
  selectInfoList.value.splice(index, 1)
}
</script>
